<template>
  <div class="dn-container">
<!--   <div class="main-header">
      <div class="header-left">
        <div class="back-div" @click="goback">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </div>
        <div class="tabs">
          <div class="tab on">
            <i></i>
            <span>悬浮菜单</span>
          </div>
        </div>
      </div>
      <div class="header-right">
        <div class="btn-group">
          <div class="btn-apply" @click="save(0)"><div>保存菜单</div></div>
        </div>
      </div>
    </div> -->
    <div class="main_body">
      <div class="phone-area">
        <div class="scroll-body">
          <div class="page-content">
            <div class="row relative w840">
              <div class="diy-phone">
                <div class="phone-body">
                  <div class="phone-title goods">
                    <div class="phone-top">
                      <div class="custom-navbar" style="width: 375px; height: 64px; background: rgb(255, 255, 255);">
                        <img
                          src=""
                          alt
                          style="width: 375px; height: 20px; position: absolute; top: 0px; left: 0px; z-index: 100;"
                        />
                        <img
                          src=""
                          alt
                        />
                      </div>
                    </div>
                    <p class="page-title" style="color: rgb(33, 33, 33);">悬浮菜单</p>
                  </div>
                  <div class="phone-main">
                    <div class="my-btn">
                      <div class="btn-div">
                        <div :style="'background:' + data.bgcolor + ';opacity:' + data.opacity / 100"></div>
                        <i :class="data.icon" :style="'color:' + data.iconcolor"></i>
                      </div>

                      <div class="btns-div">
                        <div class="btns-item" v-for="(item, index) in data.tablist">
                          <div class="btns-icon"><i :class="item.icon"></i></div>
                          <span>{{ item.text }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="component-setter">
        <el-card class="box-card">
          <div slot="header" class="clearfix"><span>悬浮菜单</span></div>
          <div>
            <el-collapse v-model="activeNames">
              <el-collapse-item title="组件设置" name="0">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="是否开启">
                    <el-radio-group v-model="data.is_open">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="移动设置">
                    <el-radio-group v-model="data.is_move">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="显示页面:" prop="checkedCities">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="data.checkedCities" @change="handleCheckedCitiesChange">
                      <el-checkbox v-for="(item, i) in cities" :label="item.value" :key="i">{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="按钮设置" name="1">
                <el-form size="medium" label-width="90px">
                  <el-form-item label="收起图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.icon != ''">
                        <i :class="data.icon"></i>
                        <!-- <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i> -->
                        <span class="choose_bar" @click="chooseIconname('icon')"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIconname('icon')"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="展开图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.selecticon != ''">
                        <i :class="data.selecticon"></i>
                        <!-- <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i> -->
                        <span class="choose_bar" @click="chooseIconname('selecticon')"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.selecticon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIconname('selecticon')"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="图标颜色"><ColorPicker :color="data" :name="'iconcolor'"></ColorPicker></el-form-item>
                  <el-form-item label="背景颜色"><ColorPicker :color="data" :name="'bgcolor'"></ColorPicker></el-form-item>
                  <el-form-item label="透明度">
                    <div class="slider_box">
                      <el-slider class="slider_item" :max="100" v-model="data.opacity"></el-slider>
                      <el-input-number v-model="data.opacity" :controls="false" :min="0" :max="100"></el-input-number>
                    </div>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="内容" name="2">
                <template v-if="data.type == 1">
                  <draggable element="div" style="padding: 10px;" v-model="data.tablist">
                    <div class="container" v-for="(item, i) in data.tablist" :key="i">
                      <i class="el-icon-error cancal" @click="dellist(i)"></i>
                      <i class="el-icon-menu left"></i>
                      <div class="content">
                        <el-form size="medium" label-width="90px">
                          <el-form-item label="图标">
                            <div class="icon_box">
                              <span class="hasIcon" v-show="item.icon != ''">
                                <i :class="item.icon"></i>
                                <!-- <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i> -->
                                <span class="choose_bar" @click="chooseIcon(i)"><i class="txt">替换</i></span>
                              </span>
                              <span class="noIcon" v-show="item.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon(i)"></i></span>
                            </div>
                          </el-form-item>
                          <el-form-item label="按钮文字" v-if="data.show_text">
                            <el-input type="text" placeholder="请输入内容" v-model="item.text" maxlength="10" show-word-limit></el-input>
                          </el-form-item>
                          <el-form-item label="功能">
                            <el-radio-group v-model="item.type">
                              <el-radio :label="1">返回上页</el-radio>
                              <el-radio :label="2">回到首页</el-radio>
                              <el-radio :label="3">回到顶部</el-radio>
                              <el-radio :label="4">跳转链接</el-radio>
                            </el-radio-group>
                          </el-form-item>
                          <el-form-item label="链接地址" v-if="item.type == 4">
                            <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </draggable>
                  <el-button v-if="data.tablist.length < 5" @click="addmenu">添加</el-button>
                </template>
                <template v-if="data.type == 2 || data.type == 3">
                  <draggable element="div" style="padding: 10px;" v-model="data.tablist">
                    <div class="container" v-for="(item, i) in data.tablist" :key="i">
                      <i class="el-icon-error cancal" @click="dellist(i)"></i>
                      <i class="el-icon-menu left"></i>
                      <div class="content">
                        <el-form size="medium" label-width="90px">
                          <el-form-item label="图片">
                            <div style="width:60px;height: 60px;"><Upload :tempUrl="item.url" @input="getimg($event, item)"></Upload></div>
                          </el-form-item>
                          <el-form-item label="选中图片">
                            <div style="width:60px;height: 60px;"><Upload :tempUrl="item.active_url" @input="getacimg($event, item)"></Upload></div>
                          </el-form-item>
                          <el-form-item label="功能">
                            <el-radio-group v-model="item.type">
                              <el-radio :label="1">返回上页</el-radio>
                              <el-radio :label="2">回到首页</el-radio>
                              <el-radio :label="3">回到顶部</el-radio>
                              <el-radio :label="4">跳转链接</el-radio>
                            </el-radio-group>
                          </el-form-item>
                          <el-form-item label="链接地址" v-if="item.type == 4">
                            <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                          </el-form-item>
                          <el-form-item label="按钮文字" v-if="data.show_text">
                            <el-input type="text" placeholder="请输入内容" v-model="item.text" maxlength="4" show-word-limit></el-input>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </draggable>
                  <el-button  @click="addmenu">添加</el-button>
                </template>
              </el-collapse-item>
              <el-collapse-item title="内容样式" name="3">
                <el-form size="medium" label-width="100px">

                </el-form>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer">
      <el-button v-has type='primary' style="margin-left: 20px;" @click="save(0)">保存数据</el-button>
    </div>
    <el-dialog class="selectlink" title="链接选择器" :visible.sync="drawer" destroy-on-close width="800px">
      <SelectLink ref="selectlink" :linkdata="linkdata" @changelink="changelink"></SelectLink>
    </el-dialog>
    <el-dialog class="selecticon" title="图标选择器" :visible.sync="iconshow" destroy-on-close width="960px"><SelectIcon @changeIcon="changeIcon"></SelectIcon></el-dialog>
  </div>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';

// 引入拖拽组件
import draggable from 'vuedraggable';
//组件列表
import type_data from './modules/data';
//按钮列表
import btn_data from './modules/btn_data';
import SelectLink from '@/components/SelectLink/index';
import ColorPicker from '@/components/ColorPicker/index';
import Linkdiv from '@/components/Link/index';
import SelectIcon from '@/components/SelectIcon/index';
import {getFloatConfig, saveFloatConfig} from '@/api/mall/floatmenu';
export default {
  name: 'demo',
  components: {
    draggable,
    SelectLink,
    ColorPicker,
    SelectIcon,
    Linkdiv,
    Upload
  },
  data() {
    return {
      linkdata: {},
      tab_num: 0,
      iconshow: false,
      name: '',
      data: {
        is_open:0,
        is_move:0,
        type: 1,
        name: '底部菜单',
        shownum: 0,
        num_color: '#FF3C29',
        line_color: '#FFFFFF',
        selecticon: 'el-sc-shouye2',
        icon: 'el-sc-shouye2',
        show_text: 1,
        textcolor: {
          default: '#565656',
          checked: '#212121'
        },
        bgcolor: '#000000',
        iconcolor: '#ffffff',
        opacity: 50,
        checkedCities: [],
        // iconcolor: {
        //   default: '#565656',
        //   checked: '#FF3C29'
        // },
        tablist: [
          {
            text: '返回上页',

            icon: 'el-sc-shouye2',
            linkdata: {},
            name: '',
            url: '',
            active_url: '',
            type: 1
          },
          {
            text: '返回首页',

            icon: 'el-sc-shouye2',
            linkdata: {},
            name: '',
            url: '',
            active_url: '',
            type: 2
          },
          {
            text: '返回顶部',

            icon: 'el-sc-shouye2',
            linkdata: {},
            name: '',
            url: '',
            active_url: '',
            type: 3
          },
          {
            text: '购物车',

            icon: 'el-sc-shouye2',
            linkdata: {},
            name: '',
            url: '',
            active_url: '',
            type: 4
          }
        ]
      },
      drawer: false,
      linkdata: {},
      activeNames: ['0', '1', '2', '3'],
      cities: [
        {
          label: '商场首页',
          value: '0'
        },
        {
          label: '商品详情页',
          value: '1'
        },
        {
          label: '订单详情',
          value: '2'
        },
        {
          label: '支付成功',
          value: '3'
        },
        {
          label: '个人中心',
          value: '4'
        },
        {
          label: '积分明细',
          value: '5'
        },
        {
          label: '我的收藏',
          value: '6'
        },
        {
          label: '余额明细',
          value: '7'
        },

        {
          label: '会员中心',
          value: '8'
        },
        {
          label: '分类页面',
          value: '9'
        },

        {
          label: '订单列表',
          value: '10'
        }
      ],
      isIndeterminate: true,
      checkAll: false
    };
  },

  mounted() {
    this.getdata();
  },
  watch: {
    'data.line_color': {
      handler() {
        // this.can();
      }
    }
  },
  methods: {
    getdata() {
      getFloatConfig({}).then(res => {
        let data = JSON.parse(res.msg);
        if (data.checkedCities.length < this.cities.length && data.checkedCities.length > 0) {
          this.isIndeterminate = true;
        } else {
          this.isIndeterminate = false;
          if (data.checkedCities.length == 0) {
            this.checkAll = false;
          } else {
            this.checkAll = true;
          }
        }
        this.data = data;
      });
    },
    changetype(e) {
      if (e == 3) {
        // this.can();
      }
    },
    can(data) {
      console.log(data);
      var c = document.getElementById('myCanvas');
      var content = c.getContext('2d');
      //三次方贝塞尔曲线
      var w = c.width;
      var h = c.height;
      content.clearRect(0, 0, w, h);
      content.beginPath();
      content.strokeStyle = '#FFFFFF';
      content.moveTo(0, 28);
      content.bezierCurveTo(40, 20, 40, 0, 55, 0);
      content.bezierCurveTo(75, 0, 70, 20, 110, 28);
      content.lineTo(0, 28);
      content.fillStyle = '#FFFFFF'; //填充颜色
      content.fill(); //填+
      content.stroke();
      content.strokeStyle = this.data.line_color;
      content.beginPath();
      content.moveTo(0, 28);
      content.bezierCurveTo(40, 20, 35, 0, 55, 0);
      content.bezierCurveTo(75, 0, 70, 20, 110, 28);
      content.stroke();
    },
    addmenu() {
      this.data.tablist.push({
        text: '首页',

        icon: 'el-sc-shouye2',
        linkdata: {},
        name: '',
        url: '',
        active_url: '',
        type: 4
      });
    },
    getimg(data, item) {
      item.url = data;
    },
    getacimg(data, item) {
      item.active_url = data;
    },
    goback() {
      this.$router.go(-1);
    },
    bottom_menudetail() {
      let data = {
        id: this.id
      };
      bottom_menudetail(data).then(res => {
        this.data = res.msg.data;
        this.update_time = res.msg.update_time;
      });
    },
    selectlink(data, i) {

      this.drawer = true;
      this.tab_num = i;
      // this.linkdata = data;
	  this.$nextTick(()=>{
	     this.$refs.selectlink.init(data)
	  })
    },
    changelink(data) {
      this.drawer = false;
      this.data.tablist[this.tab_num].linkdata = data;
    },

    chooseIcon(i) {
      this.iconshow = true;
      this.tab_num = i;
      this.icontype = 1;
    },
    chooseIconname(name) {
      this.iconshow = true;
      this.name = name;
      this.icontype = 2;
    },
    changeIcon(data) {
      this.iconshow = false;

      if (this.icontype == 1) {
        this.data.tablist[this.tab_num].icon = data;
      } else if (this.icontype == 2) {
        console.log(this.name);
        this.data[this.name] = data;
      }
    },
    dellist(i) {
      this.data.tablist.splice(i, 1);
    },
    //验证
    async validatelist() {
      var alist;
      var type;
      var c = true;
      alist = this.data.tablist;
      if (this.data.type == 1) {
        type = ['name', 'linkdata', 'icon'];
      } else {
        type = ['name', 'linkdata', 'active_url', 'url'];
      }

      var b = await this.conutAttri(alist, 1, type);
      return b;
    },
    async conutAttri(data, i, type) {
      if (!type) {
        return true;
      }

      if (type.indexOf('text') > -1) {
        let a = data.findIndex(_ => {
          return _.text == '';
        });
        if (a > -1) {
          this.countList(i, '请输入按钮文字');
          return false;
        }
      }
      if (type.indexOf('icon') > -1) {
        let a = data.findIndex(_ => {
          return _.icon == '';
        });
        if (a > -1) {
          this.countList(i, '请选择图标');
          return false;
        }
      }
      if (type.indexOf('linkdata') > -1) {
        let a = data.findIndex(_ => {
          return !_.linkdata.link;
        });
        console.log(a);
        if (a > -1) {
          this.countList(i, '请选择页面链接');
          return false;
        }
      }
      if (type.indexOf('url') > -1) {
        let a = data.findIndex(_ => {
          return _.url == '';
        });
        if (a > -1) {
          this.countList(i, '请选择图片');
          return false;
        }
      }
      if (type.indexOf('active_url') > -1) {
        let a = data.findIndex(_ => {
          return _.active_url == '';
        });
        if (a > -1) {
          this.countList(i, '请选择选中图片');
          return false;
        }
      }
      return true;
    },
    countList(i, msg) {
      this.$message.error(msg);
    },
    save() {
      let _this = this;
      let goods = [];
      // let info=this.data;
      // info.showPage=this.obj.checkedCities
      let data = {
        content: JSON.stringify(this.data)
      };
      saveFloatConfig(data).then(res => {
        _this.$message.success('保存成功');
        _this.getdata();
      });
    },
    handleCheckAllChange(val) {
      if (val) {
        let list = [];
        this.cities.forEach(a => {
          list.push(a.value);
        });
        this.data.checkedCities = list;
      } else {
        this.data.checkedCities = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
};
</script>
<style>
.input_content {
  margin-top: 10px;
  background: #f4f6f8;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 20px;
}

.input_content .el-color-picker__trigger {
  width: 70px;
}

.input_div {
  display: flex;
  margin-bottom: 10px;
}

#myCanvas {
  position: absolute;
  top: -28px;
  left: calc(50% - 55px);
}
.input-with-reset {
  width: 240px;
  margin-left: 20px;
  height: 36px;
}

.color_div {
  display: flex;
  align-items: center;
}

.slider_box {
  display: flex;
}

.slider_item {
  width: 275px;
  margin-right: 20px;
}

.slider_input {
  width: 110px;
}
.component-setter .el-card__body {
  height: calc(100vh - 125px);
  overflow-y: auto;
}
.selectlink .el-dialog__body {
  padding-bottom: 0;
}
</style>
<style scoped lang="scss">
.app {
  width: 640px;
  margin: 0 auto;
  height: 800px;
  overflow: scroll;
}

.dn-container {
  // height: 100vh;
  height: calc(100vh - 70px);
  box-sizing: border-box;
  overflow-y: hidden;
  .main-header {
    color: #fff;
    height: 56px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-left {
      display: flex;
      align-items: center;
      .back-div {
        width: 80px;
        height: 30px;
        background: rgba(77, 110, 242, 1);
        box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.1) inset;
        border-radius: 7px;
        margin-left: 40px;
        box-sizing: border-box;
        margin-right: 183px;
        // margin: auto;
        text-align: center;
        line-height: 30px;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          // background-color: #182533;
        }
      }
      .tabs {
        display: flex;
        align-items: center;
        .tab {
          display: flex;
          align-items: center;
          padding: 0 18px;
          height: 56px;
          cursor: pointer;
          color: #333333;
          font-size: 16px;
          border-bottom: 3px solid #fff;
          &.on {
            color: #4d6ef2;
            border-bottom: 3px solid #4d6ef2;
            // background: #131f2b;
          }
        }
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      margin-right: 40px;
      .tabs {
        display: flex;
        align-items: center;
        .tab {
          display: flex;
          align-items: center;
          padding: 0 18px;
          height: 56px;
          cursor: pointer;
          &.on {
            background: #131f2b;
          }
        }
      }
      .btn-group {
        display: flex;

        align-items: center;
        .btn {
          position: relative;
          padding: 0 20px;
          min-width: 80px;
          height: 56px;
          font-size: 14px;
          line-height: 56px;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        .btn-apply {
          // padding: 0 16px;

          display: flex;

          align-items: center;

          justify-content: center;
          border-radius: 2px;
          height: 32px;
          font-size: 14px;
          color: #fff;
          width: 100px;
          height: 32px;
          background: rgba(77, 110, 242, 1);
          box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.1) inset;
          border-radius: 7px;
          margin-left: 18px;
          cursor: pointer;
        }
      }
    }
  }
}

.main_body {
  width: 100%;
  min-width: 1300px;
  box-sizing: border-box;
  padding-left: 306px;
  padding-right: 540px;
  display: flex;
  position: relative;
  background: #f4f6f8;
  justify-content: center;
  overflow: auto;
  height: 100%;
  // height: calc(100vh - 56px);

  .phone-area {
    width: 434px;
    height: 828px;
    // flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    margin-right: -10px;
    margin-left: -10px;
    background: url(../../../assets/images/ipbg.png) no-repeat;
    .scroll-body {
      // height: fit-content;
      // width: 375px;
      // -ms-flex-negative: 0;
      // flex-shrink: 0;
      // margin: 40px auto 20px;
      // border-radius: 2px;
      // box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
      overflow-y: auto;
      height: fit-content;
      width: 375px;
      height: 667px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      border-radius: 2px;
      box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
      margin: 69px auto 0 auto;
      &::-webkit-scrollbar {
        display: none !important; /* Chrome Safari */
      }
      .page-content {
        min-height: 100%;
        width: 375px;

        .diy-phone {
          width: 375px;
          height: auto;
          min-height: 100%;
          background: #fff;

          .phone-body {
            background: #f3f3f3;
            .phone-main {
              min-height: 603px;
              box-sizing: border-box;
              border-top: 0;
              user-select: none;
              position: relative;
              display: flex;
              flex-direction: column;
            }
            .phone-title {
              height: 64px;
              background: #fff;
              background-size: 100% auto;
              text-align: center;
              cursor: pointer;
              display: block;
              white-space: nowrap;
              text-overflow: ellipsis;
              position: relative;

              .page-title {
                position: absolute;
                z-index: 100;
                font-family: PingFang SC;
                font-style: normal;
                font-weight: 600;
                font-size: 18px;
                line-height: 25px;
                display: flex;
                align-items: center;
                text-align: center;
                color: #212121;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: 10px;
                margin: 0;
              }

              .phone-top {
                display: flex;
                flex-direction: column;
                width: 375px;
                overflow: hidden;

                .custom-navbar img {
                  position: absolute;
                  right: 7px;
                  width: 87px;
                  height: 32px;
                  bottom: 6px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.footer{

  height: 60px;
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: 60px;
  // display: flex;
  // align-items: center;
  // justify-content: center
}
.phone-area::-webkit-scrollbar {
  display: none;
}

.component-setter {
  transform: translateX(0);
  position: absolute;
  width: 540px;
  height: 100%;
  right: 0;
  top: 0;
  background: #ffffff;
  border: 1px solid #e9edef;
  box-sizing: border-box;
  border-radius: 2px;
  .el-card__body {
    height: calc(100% - 55px);
    overflow-y: auto;
  }
}

.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}
.item {
  position: relative;
  width: 100%;
  display: flex;
  cursor: pointer;
  background: #f4f6f8;
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid #e9edef;
  margin-bottom: 10px;
  padding: 10px 10px;

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }
}

.my-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  .btn-div {
    // background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    > div {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    i {
      position: relative;
      z-index: 2;
      font-size: 24px;
    }
  }
  .btns-div {
    position: absolute;
    bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    width: 185px;
    right: 40px;
    padding: 10px 10px 0 10px;
    border-radius: 10px;
    // display: none;
    background: rgba(0, 0, 0, 0.5);
    .btns-item {
      width: 55px;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;

      .btns-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #ffffff;
        text-align: center;
        line-height: 30px;
        margin-bottom: 5px;
        i {
          color: #000;
          font-size: 20px;
        }
      }
      span {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
